<template>
  <div class="exam-start">
    <div class="exam-start-bg">
      <div class="bg-img">
        <img class="white" src="@/assets/ceshi02.png" alt="">
        <img class="head-img" src="@/assets/ceshi03.png" alt="">
        <div class="cons">
          <p class="title">智保天赋·成人试题</p>
          <p class="number">18/22</p>
          <div class="progress">
            <span class="progress-active"></span>
          </div>
          <p class="subject">18、你对过去发生的事情会记忆犹新，当遇到一些事情的时候，你会不由自主的和过去发生的事情对照，所谓一朝被蛇咬，十年怕井绳，所以会自然地由于担心而质疑一些事情。</p>        
        </div>
        <div class="btn">
          <span class="left">A. 是的</span>
          <span class="right">B. 不完全是</span>
        </div>
      </div>
      <confirm-box :confirmMessage="message"></confirm-box>
    </div>
  </div>
</template>

<script>

import confirmBox from '@/components/confirmBox'

  export default {
    components: {
      confirmBox
    },
    data () {
      return {
        message: '',
        examList: []
      }
    },
    created () {
      this.message = {
        title: '是否继续上次未答完试题',
        tip: '您上次选择了成年答到第18题，是否继续上次剩下的题目',
        path: {path: '/'},
        btn: '去开通',
        is_show: true,
        left: '重新开始',
        right: '继续'
      }
    },
    methods: {
    }
  }
</script>

<style lang="stylus" scoped>
  .exam-start-bg
    width 100%
    height 100vh
    background-image url('../../assets/ceshi01.png')
    background-size cover
    .bg-img
      width calc(100% - 2.5rem)
      position absolute
      top 50%
      left 1.25rem
      height 47rem
      margin-top -23.5rem
      .white
        width 100%
        height 100%
      .head-img
        position absolute
        top -2.4rem
        width 7.8rem
        height 7.8rem
        border-radius 50%
        overflow hidden
        left 50%
        margin-left -3.9rem      
      .btn
        position absolute
        bottom 3rem
        left 2.7rem
        overflow hidden
        span
          display block
          width 14rem
          float: left
          text-align center
          line-height 5rem
          height 5rem
          border-radius 100px
          font-size 1.7rem
        .left
          color #333
          background-color #E6E6E6
          margin-right 2rem
        .right
          color #fff
          background-color #172F6D           
      .cons
        position absolute
        width 100%
        top 7rem
        .title
          color #33
          font-size 1.9rem
          text-align center
          height 2.5rem
          line-height 2.5rem
          font-weight bold
        .number
          color #172F6D
          font-size 1.3rem
          height 1.8rem
          line-height 1.8rem
          text-align center
          margin-top 1.5rem
        .progress
          width 70%
          margin-left 15%
          background-color #ccc
          border-radius 100px
          height .6rem
          position relative
          margin-top 1.3rem
          .progress-active
            width 50%
            display block
            position absolute
            left 0
            height .6rem
            background-color #172F6D
            border-radius 100px
        .subject
          width 70%
          margin-left 15%
          line-height 2.4rem
          font-size 1.5rem
          color #000
          margin-top 1.5rem
</style>
